<template>
  <div class="cart">
    <van-nav-bar title="购物车" fixed placeholder left-arrow  @click-left="onClickLeft"/>
    <van-empty v-if="list.length===0" description="您的购物车是空的" />
    
    <div class="shopItem">
      <van-card
      v-for="item in list"
      :key="item.cartId"
        :price="item.productPrice.toFixed(2)"
        :desc="item.standard"
        :title="item.productName"
        :thumb="item.productImg"
        >
        <template #footer>
          <van-stepper v-model="item.count" />
        </template>
      </van-card>
    </div>
   
   <van-submit-bar :price="0" button-text="提交订单">
    <van-checkbox v-model="checked">全选</van-checkbox>
   </van-submit-bar>
  </div>
</template>

<script>
import { getCartApi } from "@/utils/api";
export default {
  data() {
    return {
      checked: false,
      list: [],
      value: 1
    };
  },

  components: {},

  computed: {},

  mounted() {},
  created() {
    this.getCartData();
  },

  methods: {
    getCartData() {
      getCartApi({ token: localStorage.getItem("token") }).then(res => {
        console.log(res);
        if (res.status === "0") {
          this.list = res.result.resArr;
          console.log(this.list);
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
.cart {
  .van-submit-bar {
    bottom: 50px;
  }
  .shopItem {
    margin-top: 10px;
    position: relative;
    .van-stepper {
      position: absolute;
      right: 10px;
      bottom: 35%;
    }
  }
}
</style>
